<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>输入框 Input-表单-ZPCode UI Kits</title>
  <link rel="stylesheet" href="http://zx4.com:8001/kits/css/zpcode.min.css">
  <link rel="stylesheet" href="../statics/css/index.css">
  <link rel="stylesheet" href="../statics/highlight/styles/github-dark.min.css">
  <!--zpcode.min.js-->
  <script src="http://zx4.com:8001/kits/webcomponents/ZPElement.js" type="module" defer></script>
  <script src="http://zx4.com:8001/kits/webcomponents/form/input.js" type="module" defer></script>
  <script src="http://zx4.com:8001/kits/webcomponents/icons/user.js" type="module" defer></script>
  <script src="http://zx4.com:8001/kits/webcomponents/search/style01.js" type="module" defer></script>
  <!--zpcode.min.js-->
  <script src="../statics/webcomponents/layout/leftnav.js" type="module" defer></script>
  <script src="../statics/webcomponents/layout/footer.js" type="module" defer></script>
  <script src="../statics/js/form/input.js" type="module" defer></script>
  <script src="../statics/js/extra.js" type="module" defer></script>
</head>
<body class="dark">
  <div class="mih12p f">
    <left-nav current="input"></left-nav>
    <div class="fa bl1" style="width:0">
      <div class="c ma mt48 pb48">
        <h1>输入框 Input</h1>

        <hr class="mt24 mb24">
        <h2 id="default"># 默认输入框</h2>
        <p>👇效果演示：</p>
        <div class="quote f fw">
          <zp-input style="--content:#333"></zp-input>
        </div>
        <p>👇代码演示：</p>
        <pre class="pr"><code class="hljs language-xml zp-input-default-html"></code></pre>

        <hr class="mt24 mb24">
        <h2 id="color"># 改变颜色</h2>
        <p>👇效果演示：</p>
        <div class="quote f fw">
          <zp-input
            placeholder="请输入"
            placeholder-color="#4e5d72"
            color="error"
            style="
              --zp-input-bgcolor:#151f32;
              --zp-input-border-color:#2f3b4c;
              --content:#fff;
            "
          ></zp-input>
        </div>
        <p>👇代码演示：</p>
        <pre class="pr"><code class="hljs language-xml zp-input-color-html"></code></pre>
        <p>
          属性<code>type</code>：输入框类型，默认text<br>
          属性<code>placeholder-color</code>：提示符色（局部）<br>
          属性<code>color</code>：聚焦时边框色，支持的值有<code>primary</code><code>second</code><code>error</code><code>warning</code><code>success</code><code>info</code><code>gold</code><code>black</code><code>white</code>，以及具体的颜色值。<br>
          属性<code>color-light</code>：聚焦时边框发光色，当 color 为预设值（如：primary）时，color-light 值将自动与之匹配，无需设置。<br>
          属性<code>width</code>：边框宽度，默认100%<br>
          CSS 变量<code>--zp-input-bgcolor</code>：输入框背景色<br>
          CSS 变量<code>--zp-input-border-color</code>：输入框边框色<br>
          CSS 变量<code>--content</code>：输入框文本色（全局）<br>
          CSS 变量<code>--content-grey</code>：提示符色（全局）<br>
        </p>
        <p>输入框默认使用主题色，非特殊情况下，强烈建议 CSS 变量由全局定义进行穿透，使得样式分离，主题整体风格也能保持一致。</p>

        <hr class="mt24 mb24">
        <h2 id="size"># 改变大小</h2>
        <p>👇效果演示：</p>
        <div class="quote f fw ac">
          <zp-input style="--content:#333"></zp-input>
          <div class="ml12"><zp-input style="--content:#333" size="lg" value="不改变字体大小"></zp-input></div>
          <div class="ml12"><zp-input style="--content:#333;font-size:16.7px" value="随字体大小改变"></zp-input></div>
        </div>
        <p>👇代码演示：</p>
        <pre class="pr"><code class="hljs language-xml zp-input-size-html"></code></pre>
        <p>改变输入框大小有两种方式，一种是通过<code>size</code>属性，另一种是通过 CSS 的 font-size 样式修饰。<br>
        <code>size</code>属性将不会改变输入框文字大小，<code>font-size</code>将会影响输入框文字大小。</p>

        <hr class="mt24 mb24">
        <h2 id="fix"># 前后缀</h2>
        <p>👇效果演示：</p>
        <div class="quote f fw ac">
          <zp-input style="--content:#333;width:186px">
            <icon-user slot="prefix" fill="#444"></icon-user>
          </zp-input>
          <zp-input style="--content:#333;width:186px" class="ml12">
            <span slot="suffix">RMB</span>
          </zp-input>
        </div>
        <p>👇代码演示：</p>
        <pre class="pr"><code class="hljs language-xml zp-input-fix-html"></code></pre>

      </div>
      <zp-footer></zp-footer>
    </div>
    <div class="w200">
      <ul class="bl1 p0 mt48 pl24 ps t48 lh30">
        <li><a href="#default" class="txt-con txt-p-h">默认输入框</a></li>
        <li><a href="#color" class="txt-con txt-p-h">改变颜色</a></li>
        <li><a href="#size" class="txt-con txt-p-h">改变大小</a></li>
        <li><a href="#fix" class="txt-con txt-p-h">前后缀</a></li>
        <li class="mt12"><a href="#" class="txt-cg txt-b-h fs12">▲ 顶部</a></li>
      </ul>
    </div>
  </div>
  <script src="../statics/highlight/highlight.min.js"></script>
  <script src="../statics/highlight/languages/xml.min.js"></script>
  <script src="../statics/highlight/languages/css.min.js"></script>
</body>
</html>